import PropTypes from 'prop-types'
function List(props){

    // 定义数据
    // const fruits = [{id: 1, name: "apple", calories: 95}, 
    //                 {id: 2, name: "banana", calories: 110},
    //                 {id: 3, name: "orange", calories: 60},
    //                 {id: 4, name: "mango", calories: 85}, 
    //                 {id: 5, name: "grape", calories: 180}]
    
    // 对数据进行排序
    // fruits.sort((a,b)=>a.name.localeCompare(b.name)) //字典排序
    // fruits.sort((a,b)=>b.name.localeCompare(a.name)) //反字典排序
    // fruits.sort((a,b)=>a.calories - b.calories) //卡路里数值排序
    // fruits.sort((a,b)=>b.calories - a.calories) //卡路里反数值排序

    // 数据过滤
    // const lowCalFruit = fruits.filter(
    //     fruit => fruit.calories <= 100
    // )

    const categroy = props.categroy
    const itemList = props.items

    const listItems = itemList.map(item => <li key={item.id}>
                                            {item.name}:&nbsp;
                                            <b>{item.calories}</b></li>)

    return (
        <>
            <h3 className="list-categroy">{categroy}</h3>
            <ol className="list-items">
                {listItems}
            </ol>
        </>
    )
}
// 定义props的类型
List.propTypes = {
    categroy: PropTypes.string,
    // 数组的类型定义
    items: PropTypes.arrayOf(PropTypes.shape({
        id: PropTypes.number,
        name: PropTypes.string,
        calories: PropTypes.string
    }))
}
List.defaultProps = {
    categroy: "Categroy",
    items: []
}

export default List